<template>
  <div id="quisition">
    <div class="top">
      <el-button type="primary" @click="ClickAdd">新增</el-button>
      <div class="Inputs">
        <div style="margin-right:30px;">
          <input type="checkbox" v-model="Checkone" @click="Clickone" /> 草稿
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" v-model="Checktwo" @click="Clicktwo" /> 待审核
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" v-model="Checkthree" @click="Clickthree" /> 审批通过
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" v-model="Checkfour" @click="Clickfour" /> 审批不通过
        </div>
        <div class="check" style="margin-right:10px;position:relative">
          <el-input placeholder="请输入搜索关键字" maxlength="15" style="width:330px;" v-model="InputValue"></el-input>
          <i class="iconfont icon-sousuo" @click="ToCheck"></i>
        </div>
        <div>
          <i class="iconfont icon-shuaxin" @click="Toreload"></i>
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="{background:'#F5F5F5'}"
      style="padding-left:20px;padding-right:20px;margin-top:20px;"
      show-overflow-tooltip
    >
      <el-table-column
        v-for="(item,index) in tableTitle"
        :key="index"
        :prop="item.tableprop"
        :label="item.name"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.States == '草稿'"
            @click="handleClickone(scope.row)"
            type="text"
            size="small"
          >编辑</el-button>
          <el-button
            v-if="scope.row.States == '草稿'"
            @click="handleClicktwo(scope.row)"
            type="text"
            size="small"
          >删除</el-button>
          <el-button
            v-if="scope.row.States == '草稿'"
            @click="handleClickthree(scope.row)"
            type="text"
            size="small"
          >提交</el-button>
          <el-button
            v-if="scope.row.States == '待审批'"
            @click="handleClickfour(scope.row)"
            type="text"
            size="small"
          >撤回</el-button>
          <el-button
            v-if="scope.row.States != '草稿'"
            @click="handleClickfive(scope.row)"
            type="text"
            size="small"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="Pages">
      <el-pagination
        :hide-on-single-page="true"
        :page-size="pagesize"
        :pager-count="9"
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      ></el-pagination>
    </div>
    <!-- 新增请购单 -->
    <el-dialog title="购买申请单" center :visible.sync="dialog" width="800px">
      <el-form label-width="100px" :model="formone">
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请时间:">
              <el-input v-model="formone.ApplyTime" :disabled="LookType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请购类型:">
              <el-select placeholder="请选择类型:" v-model="TypeValue" :disabled="LookType" style="width:100%;">
                <el-option
                  v-for="item in Typedata"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请部门:">
              <el-input v-model="formone.Department" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前岗位:">
              <el-input v-model="formone.Jobs" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人:">
              <el-input v-model="formone.ApplyPeople" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="申请原因:">
          <el-input v-model="formone.Why" type="textarea" :disabled="LookType" placeholder="请输入申请调动的原因"></el-input>
        </el-form-item>
      </el-form>
      <div class="foottable">
        <div style="position:absolute;top:0;right:0;z-index:99">
          <el-button :disabled="LookType" type="primary" @click="AddTable">新增</el-button>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="购买明细">
            <div class="tablecontent">
              <el-table
                :data="Formtable"
                :header-cell-style="{background:'#F5F5F5'}"
                show-overflow-tooltip
                style="width:100%"
                max-height="200"
              >
                <el-table-column
                  v-for="(item,index) in Formtabletitle"
                  :key="index"
                  :prop="item.tableprop"
                  :label="item.name"
                  align="center"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button @click="Clickredact(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="Clickdelete(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="text-align:right;margin-top:10px;">
        <el-button type="primary" @click="ClickYes">确定</el-button>
        <el-button @click="Canceltwo">取消</el-button>
      </div>
    </el-dialog>
    <!-- 新增购买明细弹窗 -->
    <el-dialog title="购买明细" center :visible.sync="dialogtwo" width="30%">
      <el-form label-width="100px" :model="formtwo">
        <el-form-item label="物料名称:">
          <el-select
            style="width:100%"
            v-model="formtwo.name"
            remote
            filterable
            reserve-keyword
            placeholder="请输入物料关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-model="formtwo.number" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="单位:">
          <el-input v-model="formtwo.unit" style="width:100%"></el-input>
        </el-form-item>
        <div style="text-align:right;margin-top:10px;">
          <el-button type="primary" @click="ClickYestwo">确定</el-button>
          <el-button @click="Canclematerial">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 弹窗表格编辑弹窗 -->
    <el-dialog title="编辑购买明细" center :visible.sync="dialogthree" width="30%">
      <el-form label-width="100px" :model="formthree">
        <el-form-item label="物料编码:">
          <el-input v-model="formthree.Materialcode" :disabled="true" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="物料名称:">
          <el-input v-model="formthree.Materialname" :disabled="true" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="规格:">
          <el-input v-model="formthree.Specifications" :disabled="true" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="型号:">
          <el-input v-model="formthree.Model" :disabled="true" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-model="formthree.Number" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="单位:">
          <el-input v-model="formthree.Unit" style="width:100%"></el-input>
        </el-form-item>
        <div style="text-align:right;margin-top:10px;">
          <el-button type="primary" @click="ClickYes_one">确定</el-button>
          <el-button @click="Canceltwo_one">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "quisition",
  data() {
    return {
      LookType:false,
      Checkone: false,
      Checktwo: false,
      Checkthree: false,
      Checkfour: false,
      InputValue: "",
      total: 20,
      pagesize: 10,
      dialog: false,
      tableData: [
        {
          States: "草稿",
          ApplyOrder: "SF7896466",
          ApplyTime: "2018-1-1",
          ApplyPeople: "张三",
          Department: "电器维修组",
          Jobs: "电器维修工程师",
          Why: "检修备货"
        },
        {
          States: "待审批",
          ApplyOrder: "SF7896466",
          ApplyTime: "2018-1-1",
          ApplyPeople: "李四",
          Department: "电器维修组",
          Jobs: "电器维修工程师",
          Why: "检修备货"
        },
        {
          States: "审批通过",
          ApplyOrder: "SF7896466",
          ApplyTime: "2018-1-1",
          ApplyPeople: "王五",
          Department: "电器维修组",
          Jobs: "电器维修工程师",
          Why: "检修备货"
        },
        {
          States: "审批未通过",
          ApplyOrder: "SF7896466",
          ApplyTime: "2018-1-1",
          ApplyPeople: "张三",
          Department: "电器维修组",
          Jobs: "电器维修工程师",
          Why: "检修备货"
        },
        {
          States: "待审批",
          ApplyOrder: "SF7896466",
          ApplyTime: "2018-1-1",
          ApplyPeople: "谢六",
          Department: "电器维修组",
          Jobs: "电器维修工程师",
          Why: "检修备货"
        },
        {
          States: "草稿",
          ApplyOrder: "SF7896466",
          ApplyTime: "2018-1-1",
          ApplyPeople: "张三",
          Department: "电器维修组",
          Jobs: "电器维修工程师",
          Why: "检修备货"
        }
      ],
      tableTitle: [
        { name: "状态", tableprop: "States" },
        { name: "申请单号", tableprop: "ApplyOrder" },
        { name: "申请时间", tableprop: "ApplyTime" },
        { name: "申请人", tableprop: "ApplyPeople" },
        { name: "所在部门", tableprop: "Department" },
        { name: "当前岗位", tableprop: "Jobs" },
        { name: "请购原因", tableprop: "Why" }
      ],
      formone: {
        ApplyTime: "",
        Department: "电器维修组",
        Jobs: "电器维修工程师",
        ApplyPeople: "张三",
        Why: ""
      },
      TypeValue: "",
      Typedata: [
        { Id: "1", Name: "项目需求" },
        { Id: "2", Name: "工作需要" },
        { Id: "3", Name: "材料损坏" }
      ],
      Formtable: [
        // {
        //   Materialcode: "201256",
        //   Materialname: "蛟龙2号",
        //   Specifications: "蛟龙64",
        //   Model: "ik 6400",
        //   Number: "9",
        //   Unit: "个"
        // },
        // {
        //   Materialcode: "201257",
        //   Materialname: "蛟龙2号",
        //   Specifications: "蛟龙64",
        //   Model: "ik 6400",
        //   Number: "9",
        //   Unit: "个"
        // },
        // {
        //   Materialcode: "201258",
        //   Materialname: "蛟龙2号",
        //   Specifications: "蛟龙64",
        //   Model: "ik 6400",
        //   Number: "9",
        //   Unit: "个"
        // },
        // {
        //   Materialcode: "201256",
        //   Materialname: "蛟龙2号",
        //   Specifications: "蛟龙64",
        //   Model: "ik 6400",
        //   Number: "9",
        //   Unit: "个"
        // }
      ],
      Formtabletitle: [
        { name: "物料编码", tableprop: "Materialcode" },
        { name: "物料名称", tableprop: "Materialname" },
        { name: "规格", tableprop: "Specifications" },
        { name: "型号", tableprop: "Model" },
        { name: "数量", tableprop: "Number" },
        { name: "单位", tableprop: "Unit" }
      ],
      dialogtwo: false,
      formtwo: {
        name: "",
        number: "",
        unit: ""
      },
      loading: false,
      options: [],
      dialogthree: false,
      formthree: {
        Materialcode: "",
        Materialname: "",
        Specifications: "",
        Model: "",
        Number: "",
        Unit: ""
      }
    };
  },
  methods: {
    //点击新增
    ClickAdd() {
      this.dialog = true;
      this.LookType = false;
      this.formone = {
        ApplyTime: "",
        Department: "电器维修组",
        Jobs: "电器维修工程师",
        ApplyPeople: "张三",
        Why: ""
      };
      this.TypeValue = '';
    },
    //查询关键字
    ToCheck() {},
    //刷新
    Toreload() {
      this.$router.go(0);
    },
    //勾选框
    Clickone() {
      if (this.Checkone) {
        this.Checkone = false;
      } else {
        this.Checkone = true;
      }
    },
    Clicktwo() {
      if (this.Checktwo) {
        this.Checktwo = false;
      } else {
        this.Checktwo = true;
      }
    },
    Clickthree() {
      if (this.Checkthree) {
        this.Checkthree = false;
      } else {
        this.Checkthree = true;
      }
    },
    Clickfour() {
      if (this.Checkfour) {
        this.Checkfour = false;
      } else {
        this.Checkfour = true;
      }
    },
    //分页
    current_change(currentPage) {
      console.log(currentPage);
    },
    // 点击编辑
    handleClickone(r) {
      this.dialog = true;
      this.formone.ApplyTime = r.ApplyTime;
      //添加请购类型
      this.formone.Department = r.Department;
      this.formone.Jobs = r.Jobs;
      this.formone.ApplyPeople = r.ApplyPeople;
      this.formone.Why = r.Why;
    },
    //点击删除
    handleClicktwo(r) {
      this.$confirm("是否删除此请购单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //点击提交
    handleClickthree(r) {
      this.$confirm("是否提交此请购单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //点击撤回
    handleClickfour(r) {
      this.$confirm("是否撤回此请购单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //点击查看
    handleClickfive(r) {
      this.dialog = true;
      this.LookType = true;
      this.formone.ApplyTime = r.ApplyTime;
      //添加请购类型
      this.formone.Department = r.Department;
      this.formone.Jobs = r.Jobs;
      this.formone.ApplyPeople = r.ApplyPeople;
      this.formone.Why = r.Why;
    },
    //点击表单取消
    Canceltwo() {
      this.dialog = false;
      this.LookType = false;
    },
    //点击表单确定
    ClickYes() {
      this.dialog = false;
      this.LookType = false;
    },
    //点击表单新增
    AddTable() {
      this.dialogtwo = true;
    },
    //物料名称远程搜索
    remoteMethod(r) {
      if (r !== "") {
        this.loading = true;
        //添加数据请求
      } else {
        this.options = [];
      }
    },
    //物料弹窗确定
    ClickYestwo() {
      this.dialogtwo = false;
    },
    //物料弹窗取消
    Canclematerial() {
      this.dialogtwo = false;
    },
    //点击物料弹窗表格编辑
    Clickredact(r) {
      this.dialogthree = true;
      this.formthree.Materialcode = r.Materialcode;
      this.formthree.Materialname = r.Materialname;
      this.formthree.Specifications = r.Specifications;
      this.formthree.Model = r.Model;
      this.formthree.Number = r.Number;
      this.formthree.Unit = r.Unit;
    },
    //点击物料弹窗表格删除
    Clickdelete(r) {
      this.$confirm("是否删除此购买明细?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.Formtable.forEach((value, index) => {
            if (r.Materialcode == value.Materialcode) {
              this.Formtable.splice(index, 1);
            }
          });
        })
        .catch(() => {});
    },
    //点击编辑物料明细确定
    ClickYes_one() {
      this.Formtable.forEach((value, index) => {
        if (this.formthree.Materialcode == value.Materialcode) {
          this.Formtable[index].Number = this.formthree.Number;
          this.Formtable[index].Unit = this.formthree.Unit;
        }
      });
      this.dialogthree = false;
    },
    //点击编辑物料明细取消
    Canceltwo_one() {
      this.dialogthree = false;
    }
  },
  mounted() {},
  watch: {}
};
</script>

<style scoped>
#quisition {
  position: relative;
}
.top {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.Inputs {
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.Inputs > div {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.check > i {
  position: absolute;
  right: 20px;
}
.Pages {
  position: absolute;
  margin-top: 50px;
  right: 200px;
}
.foottable {
  position: relative;
  width: 100%;
}
.tablecontent {
  width: 100%;
  height: 200px;
}
</style>